<#assign base=request.contextPath />
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="${base}/css/bootstrap.min.css" />
		<script type="text/javascript" src="${base}/js/jquery-1.12.0.min.js"></script>
		<link rel="stylesheet" href="${base}/css/common.css" />
		<script type="text/javascript" src="${base}/js/common.js"></script>
	</head>

	<body>
		<div class="container-fluid">
			<ul class="msg_list border_top">
				<li>
					<p>${topic.content}</p>
					<span>${topic.ctime}</span> 
					<span>${topic.username}</span>	
				</li>
				<#list replys as item>
				<li>
					<p>${item.content}</p>
					<span>${item.rtime}</span>
					<span>${item.replyName}</span>
				</li>
				</#list >
			</ul> 
			<ul class="pager">
					<li>
						<a>没有前一页</a> 

					<li>
					<#if next != -2>
						<a href="javascript:;" class="${topicid}/${next}" >后一页</a>
						<#else>
						<a>没有后一页</a> 
					</#if>
					</li>
			</ul>


				<div class="choose_con mar_top">
					<a class="a_color">照片</a>
					<a class="a_color">语音</a>
				</div> 
				<div class="msg_area form-control" id="content" contenteditable ="true">

				</div>
				<div class="form-group login_reg_btn">
					<button id="submit" class="btn btn-primary">回复</button>
				</div>
		</div>
		<script>
				var $ppager = $(".pager li a").eq(0),
					$npager = $(".pager li a").eq(1),
					msg_list = $(".msg_list");
					
				$("#submit").click(function() {
					if($("#content").html()=='') return;
					
					$.post("${topicid}/r",{  
						"content":$("#content").html()
					},function(res){
						var r=jQuery.parseJSON(res);
						if(r.status == undefined){
						window.location.reload();
						alert("回复成功");
						}
						else  alert("回复失败"); 
					});
					
				
				});
					
				function pager(){
					if($(this).attr("class") != undefined){
					$.get($(this).attr("class"),{},handler);
					}
				}
					$ppager.on("click",pager);
					$npager.on("click",pager);
					
				function handler(data) {	
				msg_list.empty();
				
				if(data.topic != undefined){
					var each= "<li>"
					+"	<p>"+data.topic.content+"</p>"
					+"	<span>"+data.topic.ctime+"</span>" 
					+"<span>"+data.topic.username+"</span>"	
					+"</li>";
				
					msg_list.append(each);
				}
				
				$.each(data.data, function(index, value) {
			  		 var each= "<li>"
								+"	<p>"+value.content+"</p>"
								+"	<span>"+value.rtime+"</span>" 
								+"	<span>"+value.replyName+"</span>"	
								+"</li>";
						
					msg_list.append(each);
				});
				if(data.pre != -1) {
					$ppager.attr("class","${topicid}"+"/"+data.pre);
					$ppager.attr("href","javascript:;");
					$ppager.html("前一页");
					}
				else{
					$ppager.html("没有前一页");
					$ppager.removeAttr("class");
					$ppager.removeAttr("href");
				}
				if(data.next != -2) {
					$npager.html("下一页");
					$npager.attr("href","javascript:;");
					$npager.attr("class","${topicid}"+"/"+data.next);
				}		
				else{
					$npager.html("没有下一页");
					$npager.removeAttr("class");
					$npager.removeAttr("href");
			
				}
			}
					
		</script>
	</body>

</html>